import axios from 'axios'
import store from '@/store/index.js'
import router from '@/router/index.js'
import { Message } from 'element-ui'
import { getToken, rmToken } from '@/utils/store.js'

const codeMessage = {
  400: '请求错误',
  401: '登录状态失效，请重新登录',
  403: '拒绝访问',
  404: '请求地址不存在',
  500: '服务器错误，请稍后再试',
  502: '网关错误',
  503: '服务不可用，服务器暂时过载或维护',
  504: '网关超时',
}

const request = axios.create({
  baseURL: process.env.VUE_APP_API_HOST,
  timeout: 20000,
})

// request拦截器
request.interceptors.request.use(
  config => {
    store.getters.token &&
      (config.headers['Authorization'] = store.getters.token)
    return config
  },
  error => {
    Message.error({ message: '请求超时！' })
    Promise.reject(error)
  }
)

// response拦截器
request.interceptors.response.use(
  response => {
    // 可以通过返回的code标示请求状态，如通过 XMLHttpRequest状态码标示，逻辑可写在error中
    let { status } = response
    if (status === 200) {
      return response
    } else {
      Message.error({ message: '请求code !== 200' })
      return Promise.reject(response)
    }
  },
  error => {
    if (error.response) {
      // 发出了请求，服务器返回的状态码不在2xx范围内
      errorShowMsg(error.response.status)
    } else if (error.request) {
      // 已发出请求，但是未收到回复
      // error.request 在浏览器环境是 XMLHttpRequest 的实例
      console.log(error.request)
      Message.error({ message: '服务错误' })
    } else {
      // Something happened in setting up the request that triggered an Error
      console.log('Error', error.message)
      Message.error({ message: '服务错误' })
    }

    return Promise.reject(error)
  }
)

function errorShowMsg(code) {
  if (code === 401) {
    if (getToken()) {
      Message.error({
        message: codeMessage[code],
        onClose: () => {
          router.push({ path: '/login' })
        },
      })
    }

    rmToken()
  } else {
    Message.error({ message: codeMessage[code] })
  }
}

export default request
